<template>
  <div class="list-box">
    <div class="left">
      <wired-card class="article-item" v-for="item in articleList" :key="item.articleId">
        <div class="con">
          <h3>
            <router-link :to="{path: `/article/${item.id}`}" class="hover-underline"  v-text="item.title"></router-link>
          </h3>
          <p v-text="item.content"></p>
          <wired-button class="tag" v-text="item.type"></wired-button>
          <router-link :to="{name: 'user-introduce', params: {author: item.author}}" class="hover-underline" v-text="item.author"></router-link>
          <i>|</i>
          <span v-text="item.date"></span>
          <i>|</i>
          <span>
            已有<strong v-text="item.viewed">0</strong>人看过
          </span>
        </div>
      </wired-card>
    </div>
    <div class="right">
      <wired-listbox class="category">
        <h2>分类</h2>
        <wired-item value="html" text="html"></wired-item>
        <wired-item value="css" text="css"></wired-item>
        <wired-item value="javascript" text="javascript"></wired-item>
        <wired-item value="vue" text="vue"></wired-item>
        <wired-item value="react" text="react"></wired-item>
      </wired-listbox>
    </div>
  </div>
</template>

<script>
import Bll from './bll.js'
export default {
  name: 'article-list',
  data () {
    return {
      articleList: []
    }
  },
  created () {
    this.bll = new Bll(this)
    this.bll.getArticleList()
  }
}
</script>

<style lang="less" scoped>
.list-box{
  width: 90%;
  max-width: 1200px;
  min-width: 768px;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
  .left{
    width: 78%;
    padding: 0 30px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    .article-item{
      margin-bottom: 20px;
      .con{
        padding: 20px;
        min-width: 500px;
        a{
          color: #4c4c4b;
        }
        p{
          padding-bottom: .5em;
        }
        span, .tag{
          padding: 2px 10px;
        }
      }
    }
  }
  .right{
    width: 20%;
    .category{
      h2{
        text-align: center;
      }
    }
  }
}
</style>
